<template>
	<div class="page-wrap" data-title="订单详情页面">
		<div class="page-inner">
			<div class="section">
				<div class="sec-title">服务单信息</div>
				<div class="sec-ctx">
					<div class="info-list">
						<div class="info-item">
							<div class="label">服务单状态：</div>
							<div class="val">{{ info.statusInfo }}</div>
						</div>
						<div class="info-item">
							<div class="label">服务单编号：</div>
							<div class="val">{{ info.sn }}</div>
						</div>
						<div class="info-item">
							<div class="label">申请时间：</div>
							<div class="val">{{ info.createdTime }}</div>
						</div>
						<div class="info-item">
							<div class="label">售后类型：</div>
							<div class="val">{{ refund_type_title }}</div>
						</div>
					</div>
				</div>
			</div>

			<div class="section">
				<div class="sec-title">售后信息</div>
				<div class="sec-ctx">
					<div class="info-list">
						<div class="info-item">
							<div class="label">售后原因：</div>
							<div class="val">{{ info.reason }}</div>
						</div>
						<div class="info-item">
							<div class="label">问题描述：</div>
							<div class="val">{{ info.remark }}</div>
						</div>
						<div class="info-item">
							<div class="label">售后凭证图片：</div>
							<div class="val">

								<div class="image-list">
									<div class="image-item" v-for="(pic, pic_index) in info.images">
										<el-image style="width: 100px; height: 100px" :src="pic"
											:preview-src-list="[pic]">
										</el-image>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="section">
				<div class="sec-title">售后商品清单</div>

				<div class="sec-ctx">
					<div class="order-info">服务单编号：{{ info.sn }}</div>
					<div class="product-info">
						<div class="table-box">
							<el-table ref="multipleTable" :data="product_list" fit stripe border highlight-current-row
								min-width="100px" style="width: 100%">
								<el-table-column prop="1" label="商品" width="auto">
									<template slot-scope="scope">
										<div class="product-box">
											<div class="table-image-item">
												<el-image style="width: 70px; height: 70px" :src="scope.row.image"
													:preview-src-list="[]">
												</el-image>
											</div>
											<div class="product-title-box">
												<div class="product-title">
													{{ scope.row.title }}
												</div>
												<!-- 				<div class="product-guige">
													{{scope.row.keyVals}}
												</div> -->
											</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="2" label="规格型号" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											{{ scope.row.keyVals }}
										</div>
									</template>
								</el-table-column>

								<el-table-column prop="2" label="sn" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											{{ scope.row.sn }}
										</div>
									</template>
								</el-table-column>

								<!-- <el-table-column prop="2" label="市场价" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											{{scope.row.priceMarket}}
										</div>
									</template>
								</el-table-column> -->

								<el-table-column prop="2" label="销售单价" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											￥ {{ scope.row.priceSale }}
										</div>
									</template>
								</el-table-column>

								<el-table-column prop="2" label="数量" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											x {{ scope.row.num }}
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="2" label="小计" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											￥ {{ scope.row.priceSale * scope.row.num }}
										</div>
									</template>
								</el-table-column>

								<!-- <el-table-column fixed="right" label="操作" width="50px">
						      <template slot-scope="scope">
						      </template>
						    </el-table-column> -->
							</el-table>
						</div>
					</div>
				</div>
			</div>

			<div class="section" v-if="info.type != 3">
				<div class="sec-title">商户退款合计</div>
				<div class="sec-ctx">
					<div class="h-box">
						<div class="h-item">
							<div class="huizong-item">
								<div class="label">售后总金额:</div>
								<div class="val">¥ {{ info.money }}</div>
							</div>

							<!-- <div class="huizong-item">
								<div class="label">应退积分:</div>
								<div class="val">¥ 19.90</div>
							</div> -->
							<!-- <div class="huizong-item" v-if="payJson.balance.price">
								<div class="label">售后总余额:</div>
								<div class="val">¥ {{payJson.balance.price}}</div>
							</div> -->
							<!-- <div class="huizong-item">
								<div class="label">应退还第三方支付:</div>
								<div class="val">¥0.00</div>
							</div> -->
						</div>

						<div class="h-item" v-if="false">
							<!-- <div class="huizong-item">
								<div class="label">实退积分:</div>
								<div class="val">¥ 19.90</div>
							</div> -->
							<div class="huizong-item">
								<div class="label">实退还余额:</div>
								<div class="val">¥ 0.00</div>
							</div>
							<!-- <div class="huizong-item">
								<div class="label">实退还第三方支付:</div>
								<div class="val">¥0.00</div>
							</div> -->
						</div>
					</div>
				</div>
			</div>
		</div>


		<div class="footer-actions">
			<el-button @click="toBack()"> 返回 </el-button>
			<el-button v-if="info.statusInfo == '待审核'" type="primary" @click="open_audit()"> 售后审核 </el-button>
			<el-button v-if="info.statusInfo == '退货待收货'" type="primary" @click="do_finish_refund_receive()"> 确认收货
			</el-button>
			<el-button v-if="info.statusInfo == '换货待发货'" type="primary" @click="open_ship()"> 换货发货 </el-button>
			<el-button v-if="info.statusInfo == '待退款'" type="primary" @click="do_finish_refund_money()"> 退款完成
			</el-button>
		</div>



		<refund_audit_modal data-title="售后审核" ref="refund_audit_modal" @confirm="updateRefundInfo" />
		<refund_exchange_ship_modal data-title="换货-发货" ref="refund_exchange_ship_modal" @confirm="updateRefundInfo" />

	</div>
</template>

<script>
import refund_audit_modal from "@/components/refund/refund_audit_modal.vue";
import refund_exchange_ship_modal from "@/components/refund/refund_exchange_ship_modal.vue";

import {
	mapState
} from "vuex";
export default {
	name: "news",
	components: {
		refund_audit_modal,
		refund_exchange_ship_modal,
	},
	data() {
		return {
			id: this.$route.query.id || '',
			info: {
				// productInfo,
				// priceJson,
				// payJson
			},
			productInfo: {},
			priceJson: {},
			payJson: {},
			product_list: [],

			refund_type_title: '',
			refund_type_map: {
				1: '退款',
				2: '退货退款',
				3: '换货'
			}
		};
	},
	computed: {

	},
	watch: {},
	created() {
		this.setView();
	},
	mounted() { },
	methods: {
		setView() {
			this.$api({
				url: '/admin_service.php',
				method: "get",
				data: {
					action: "refund_info",
					id: this.id,
				},
			}).then((res) => {
				if (res.code == 200) {
					let data = res.data;
					this.info = data
					let {
						productInfo,
						priceJson,
						payJson
					} = data;
					this.$log('售后详情', this.info)

					this.productInfo = productInfo;
					this.priceJson = priceJson;
					this.payJson = payJson;
					this.product_list = [productInfo]

					this.refund_type_title = this.refund_type_map[data.type]
				}
			});
		},

		open_audit() {
			this.$refs.refund_audit_modal.init(this.info)
		},
		open_ship() {
			this.$refs.refund_exchange_ship_modal.init(this.info)
		},
		do_finish_refund_money() {
			this.$confirm('确定退款完成?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$api({
					url: '/admin_service.php',
					method: "get",
					data: {
						action: "refund_updateAfterSales",
						id: this.info.id,
						updateType: 4, //类型：1-审核驳回 2-审核通过 3-确认收货 4-完成退款
					},
				}).then((res) => {
					if (res.code == 200) {
						this.setView();
						this.$message({
							message: res.msg,
							type: 'success'
						})
					} else {
						alertErr(res.msg)
					}
				});
			}).catch(() => {

			});
		},



		do_finish_refund_receive(row) {
			this.$confirm('确认收货?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$api({
					url: '/admin_service.php',
					method: "get",
					data: {
						action: "refund_updateAfterSales ",
						id: this.info.id,
						updateType: 3, //类型：1-审核驳回 2-审核通过 3-确认收货 4-完成退款
					},
				}).then((res) => {
					if (res.code == 200) {
						this.setView();
						this.$message({
							message: res.msg,
							type: 'success'
						})
					} else {
						alertErr(res.msg)
					}
				});
			}).catch(() => {

			});
		},


		updateRefundInfo() {
			this.setView()
		}
	},
};
</script>

<style scoped lang="less">
.page-wrap {
	.page-inner {
		padding-bottom: 100px;
	}
}

.section {
	margin-bottom: 10px;
	background: #fff;
	padding: 20px;
	border-radius: 6px;
}

.sec-title {
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: bold;
}

.sec-ctx {}

.info-list {
	flex-wrap: wrap;
	// display: flex;
	flex-wrap: wrap;

	.info-item {
		margin-bottom: 15px;
		display: flex;

		&+.info-item {
			// margin-left: 20px;
		}

		.label {}

		.val {
			flex: 1;
			overflow: hidden;
		}
	}
}

// 商品信息
.product-box {
	display: flex;
	align-items: flex-start;

	.table-image-item {}

	.product-title-box {
		padding-left: 10px;

		.product-title {
			margin-bottom: 15px;
		}

		.product-guige {}
	}
}

// 价格汇总
.h-box {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;

	.h-item {
		width: 300px;

		&+.h-item {
			border-left: 1px solid #ccc;
			padding-left: 50px;
		}
	}

	.huizong-item {
		display: flex;
		justify-content: flex-end;
		font-size: 14px;

		&+.huizong-item {
			margin-top: 15px;
		}

		.label {
			padding-right: 20px;
			width: 160px;
			text-align: right;
		}

		.val {
			flex: 1;
		}
	}
}


.product-info {
	margin-top: 30px;
}




.footer-actions {
	display: flex;
	justify-content: flex-end;
	justify-content: center;
	position: fixed;
	z-index: 100;
	bottom: 0;
	right: 0;
	left: 230px;
	padding: 10px;
	background: #fff;
	box-shadow: 0 0 1px 0 #ccc;
	// padding-right: 35px;
	margin-right: 18px;
}
</style>